<template>
	<view>
		<div>
			<navitop>
				<i class="iconfont" slot="left-slot" @click="outlot">&#xe667;</i>
				<span slot="center-slot"><h4>请选择使用产品</h4></span>
				<!-- <i  slot="right-slot" class="iconfont icon-ren"></i> -->
			</navitop> 
		</div>
		<div :style="'margin-top:' + nv_height"></div>
		<div class="modular" v-for="(item,index) in dataSorce">
			<div class="modular_img">
				<div class='modular_widtn'>
					<div>
						<div><text>{{item.goodsName}}</text></div>
						<div class='modular_detalis' @click="detalis_data(index)"><text>详&nbsp;情</text></div>
					</div>
					<div>
						<div class="modular_botton">
							<text v-if="userData.goodsId == item.id" style="background-color: #ff6b00;">
								正在使用...
							</text>
							<text v-else @click="getusergoods(item)">
								开始使用
							</text>
						</div>
					</div>
				</div>
			</div>
			<div class="modular_text" v-if="item.detalis_list">
				<div class="modular_out_txt">
					<div class="modular_icon">
						<i class="iconfont icon-shouyiwending"></i><text>产品介绍</text>
					</div>
					<div class="modular_class">
						<textarea class="modular_textarea" v-html="item.remarks" disabled></textarea>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import navitop from '@/components/common/navi-top'
import {goodspage,useUrl,sysInfo} from '@/common/api/system/system.js'

export default {
	components: {
		navitop
	},
	data(){
		return {
			dataSorce: '',
			userData: '',
			detalis_list: false,
			nv_height: '',
		}
	},
	mounted() {
		 this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
		
		this.get_list();
		this.sysInfoUser();
	},
	methods: {
		// 详情切换
		detalis_data(val){
			this.dataSorce[val]['detalis_list'] = !this.dataSorce[val]['detalis_list'];
		},
		
		
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
				uni.redirectTo({
					url: '/pages/common/system/system'
				});
			}, 1000);
		},
		// 返回
		outlot(){
			if(this.userData.id == 1){
				uni.switchTab({
					url: "/pages/index/index"
				})
			}else{
				if(this.userData.goodsId){
					uni.switchTab({
						url: "/pages/index/index"
					})
				}else{
					uni.showToast({
						title: '请选择产品！',
						icon: 'error'
					})
				}
			}
		},
		
		// 获取产品
		get_list (){
			goodspage().then((rows)=> {
				if(rows.code == 200){
					for(let i in rows.data){
						rows.data[i]['detalis_list'] = this.detalis_list;
					}
					this.dataSorce = rows.data;
				}
			})
		},
		
		// 获取用户信息
		sysInfoUser(){
			sysInfo().then((rows)=> {
				if(rows.code == 200){
					this.userData = rows.data;
				}
			})
		},
		
		// 使用产品
		getusergoods(val){
			uni.showLoading({
				title: '使用中...'
			})
			useUrl({id: val.id}).then((rows)=>{
				if(rows.code == 200){
					uni.hideLoading();
					uni.showToast({
						title: '使用成功'
					})
					this.sysInfoUser();
					uni.setStorageSync('Refresh_list',0);
					setTimeout(()=>{
						uni.switchTab({
							url: "/pages/index/index"
						})
					},1500)
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.modular {
	width: 100%;
	height: 100%;
	padding: 10px 0 0 0;
	.modular_img {
		width: 100%;
		height: 70px;
		background-image: url(../../../static/image/download.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		.modular_widtn {
			width: 90%;
			padding: 30rpx 0 0 0;
			margin: auto;
			display: flex;
			justify-content: space-between;
			image {
				width: 60px;
				height: 50px;
				margin-top: -20%;
			}
			.modular_botton {
				height: 90rpx;
				line-height: 60rpx;
				text-align: center;
				text {
					background-color: #00a0e9;
					color: #fff;
					padding: 5px 20px 5px 20px;
					font-size: 14px;
				}
			}
			.modular_detalis {
				padding: 5px 0 0 0;
				color: #00a0e9;
				font-size: 14px;
			}
		}
	}
	.modular_text {
		background-color: #fff;
		.modular_out_txt {
			width: 95%;
			margin: auto;
			.modular_icon {
				border-bottom: 1px dashed #cacaca;
				padding: 10px 0 10px 0;
				i {
					padding: 0 10px 0 10px ;
					color: #00a0e9;
					font-size: 14px;
				}
			}
			
			.modular_class {
				padding: 10px 0 0 0;
				.modular_textarea {
					// border: 1px solid #cacaca;
					width: 96%;
					height: 200rpx;
					padding: 10rpx;
					overflow: hidden;
					overflow-y: auto;
				}
			}
		}
	}
	
}
</style>
